﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>页面行情(K线图横屏)</title>  
    <link rel="stylesheet" href="../jscommon/umychart.resource/font/iconfont.css" />
    <link rel="stylesheet" href="content/font/iconfont.css" />
</head>  
<body>

    <div id="kline" style="width: 900px;height:400px;position: relative;"></div>

    <script src="../jscommon/umychart.network.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.complier.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.index.data.js"></script>
    <script type="text/javascript" src="../jscommon/umychart.style.js"></script>
    <script src="content/js/webfont.js"></script>
    
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script>
        
        //预加载下阿里云图片
        WebFont.load({ custom: { families: ['iconfont'] } });

        function getURLParams(name) 
        {
        	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        	var r = window.location.search.substr(1).match(reg);
        	if (r != null) return decodeURI(r[2]);
            
            return null;
        }

        $(window).resize(resizeCanvas);
        
        function resizeCanvas()
        {
            var height= $(window).height();
            var width = $(window).width();
            var divKline=document.getElementById('kline');
            divKline.style.width=width+'px';
            divKline.style.height=height+'px';
            divKline.JSChart.OnSize();
        }
        
        
        $(function ()
        {
            var symbol=getURLParams('symbol');
            if (symbol==null) symbol='600000.sh';
        
            var index=getURLParams('index');        //指标1
            if (index==null) index='MA';
        
            var index2=getURLParams('index2');      //指标2
            if (index2==null) index2='VOL';
        
            var index3=getURLParams('index3');      //指标3
            if (index3==null) index3='MACD';

            var language=getURLParams('language');
            if (!language) language='CN';
        
            var aryIndex=new Array();
            aryIndex.push({"Index":index,"Modify":false,"Change":false});
            aryIndex.push({"Index":index2,"Modify":false,"Change":false});

            /*
            if (index3) aryIndex.push({Index:index3,Modify:false,Change:false, Lock:
                {
                    IsLocked: true,
                    Callback: unlockIndex,
                    BG: 'rgb(200,0,40)',
                    TextColor: 'rgb(255,255,255)',
                    //Text: '上锁了',
                    Font: '12px 微软雅黑',
                    Count: 10  //锁主右边几条数据
                }});
            */

            //黑色风格设置, 默认是白色风格
            //var blackStyle=HQChartStyle.GetStyleConfig(STYLE_TYPE_ID.BLACK_ID);
            //JSChart.SetStyle(blackStyle);
            //document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;
        
            // 创建股票K线图
            var jsChart=JSChart.Init(document.getElementById('kline'));
        
            var option=
                {
                    Type:'历史K线图横屏',
                    Windows:aryIndex, //窗口指标
                    Symbol:symbol,
                    IsAutoUpate:true,       //是自动更新数据
                    //TradeIndex: {Index:'交易系统-BIAS'},    //交易系统
                    IsShowRightMenu:true,          //右键菜单
                    CorssCursorInfo:{ Left:2, Right:2, Bottom:1, IsShowCorss:true },  //十字光标刻度设置

                    Language:language,

                    /*
                    OverlayIndex:
                    [
                        {Index:'RSI', Windows:0},
                        {Index:'MACD', Windows:0 },
                        {Index:'MA', Windows:1 }
                    ],  //叠加指标
                    */
        
                    KLine:
                    {
                        DragMode:1,                 //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
                        Right:1,                    //复权 0 不复权 1 前复权 2 后复权
                        Period:0,                   //周期 0 日线 1 周线 2 月线 3 年线 
                        MaxReqeustDataCount:1000,   //数据个数
                        PageSize:50,               //一屏显示多少数据
                        IndexTreeApiUrl:"https://opensourcecache.zealink.com/cache/hqh5/index/commonindextree.json",        //指标树下载地址
                        //Info:["业绩预告","公告","互动易","调研","大宗交易"],       //信息地雷
                        Info:["公告","互动易","调研"],          //信息地雷
                        KLineDoubleClick:true,              //双击分钟走势图
                        IsShowTooltip:false                 //是否显示K线提示信息
                    },
        
                    KLineTitle: //标题设置
                    {
                        IsShowName:true,       //不显示股票名称
                        IsShowSettingInfo:true //不显示周期/复权
                    },
        
                    Border: //边框
                    {
                        Left:20,    //左边间距
                        Right:40,     //右边间距
                        Bottom:60,
                        Top:0,
                    },
                    
                    Frame:  //子框架设置
                    [
                        {SplitCount:3,StringFormat:1},
                        {SplitCount:3,StringFormat:1},
                        {SplitCount:3,StringFormat:1}
                    ],

                    ExtendChart:    //扩展图形
                    [
                        {Name:'KLineTooltip' }  //手机端tooltip
                    ],
                }

            var windowHeight= $(window).height();
            var windowWidth = $(window).width();
            if (windowWidth<=420)   //手机小屏左右不显示坐标
            {
                option.KLine.IsShowTooltip=false;
                option.IsCorssOnlyDrawKLine=true;
                option.CorssCursorTouchEnd=true;
            }

            option.Windows[1].Lock= { 
                IsLocked: true, Callback: unlockIndex,
                BG: 'rgba(200,0,40,0.1)', TextColor: 'rgb(255,255,255)',
                //Text: '上锁了',
                Font: '12px 微软雅黑', Count: 10  //锁主右边几条数据
            };

            option.Windows[0].Lock= { 
                IsLocked: true, Callback: unlockIndex,
                BG: 'rgba(200,0,40,0.1)', TextColor: 'rgb(255,255,255)',
                //Text: '上锁了',
                Font: '12px 微软雅黑', Count: 10  //锁主右边几条数据
            };
        
            jsChart.SetOption(option);
            //jsChart.LockIndex('飞龙四式',unlockIndex);
        
            resizeCanvas();
        
            //setTimeout(() => { jsChart.ChangeSymbol("000001.sz");}, 20000);
        
        })
        
        function unlockIndex(data)
        {
            console.log('[unlockIndex]' , data);
            var chart=data.HQChart;
            chart.LockIndex({IndexName:data.Data.IndexName, IsLocked:false});
        }

    </script>  
</body>  
</html>